<!--
* @description 高危信号
* @author zywu
* @date 2021/01/09 10:48:39
!-->
<template>
  <div class="fireHazard-content">
    <div class="content-top-title">
      <p class="title-text">高危信号回顾</p>
    </div>
    <div class="statistics-quantity white-bg">
      <div>
        <div>
          <span id="fireHazard-lastWeek">{{highRiskSignal.lastWeekTime}}</span>
          <p>上{{periodName}}总数</p>
        </div>
        <div>
          <span id="fireHazard-thisWeek">{{highRiskSignal.thisWeekTime}}</span>
          <p>本{{periodName}}总数</p>
        </div>
        <div v-if="highRiskSignal.lastWeekTime == '0'">
          <span id="fireHazard-precent" style="color:#FA7C5A;">+{{highRiskSignal.percent}}</span>
          <p id="fireHazard-text">增长</p>
        </div>
        <div v-else-if="result>=0">
          <span id="fireHazard-precent" style="color:#75CD7E;">-{{highRiskSignal.percent}}%</span>
          <p id="fireHazard-text">降低</p>
        </div>
        <div v-else>
          <span id="fireHazard-precent" style="color:#FA7C5A;">+{{highRiskSignal.percent}}%</span>
          <p id="fireHazard-text">增长</p>
        </div>
      </div>
    </div>
    <div v-if="highRiskSignal.monthCurve&&highRiskSignal.monthCurve.length>0" class="fireHazard-chart">
      <div id="fireHazardChart"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    period: {
      type: [Number, String],
      default: '',
    },
    periodName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      highRiskSignal: {},
      result: 0,
    }
  },

  components: {},

  computed: {},

  created() {
    this.highRiskSignal = this.reportData.highRiskSignal
  },

  mounted() {
    var highRiskSignal = this.reportData.highRiskSignal
    if (highRiskSignal) {
      this.result =
        parseInt(highRiskSignal.lastWeekTime) -
        parseInt(highRiskSignal.thisWeekTime)
      if (highRiskSignal.monthCurve && highRiskSignal.monthCurve.length > 0) {
        let xAxis = []
        let seriesData = []
        let prevPeriodData = []
        highRiskSignal.monthCurve.forEach((n, i) => {
          let date = n.time.split('-')
          xAxis.push(`${Number(date[1])}.${Number(date[2])}`)
          seriesData.push(n.signalCount)
        })
        this.initMyChart(xAxis, seriesData, prevPeriodData)
      }
    }
  },

  methods: {
    initMyChart(xAxis, seriesData, prevPeriodData) {
      let myChart = echarts.init(document.getElementById('fireHazardChart'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            //type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
          backgroundColor: '#fff',
          padding: 8,
          textStyle: {
            color: '#666',
            lineHeight: 20,
            fontSize: 12,
          },
          extraCssText:
            'box-shadow: 0px 0px 15px 0px rgba(129,129,129,0.2);height:50px;',
        },
        grid: {
          top: '10px',
          left: '4%',
          right: '4%',
          bottom: '30px',
          containLabel: false,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxis,
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: '#666666',
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#f6f6f6',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            show: false,
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        color: ['#D0D7FF', '#82a9f8'],
        series: [
          // {
          // 	name: `上${this.periodName}`,
          // 	type: 'line',
          // 	smooth: true,
          // 	itemStyle: {
          // 		normal: {
          // 			//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
          // 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          // 				{
          // 					offset: 0,
          // 					color: '#e5edfe', // 0% 处的颜色
          // 				},
          // 				{
          // 					offset: 0.5,
          // 					color: '#ecf2fe', // 50% 处的颜色
          // 				},
          // 				{
          // 					offset: 1,
          // 					color: '#fdfdff', // 100% 处的颜色
          // 				},
          // 			]), //背景渐变色
          // 			lineStyle: {
          // 				// 系列级个性化折线样式
          // 				width: 0,
          // 				type: 'solid',
          // 				color: '#D0D7FF',
          // 			},
          // 		},
          // 		emphasis: {
          // 			color: '#D0D7FF',
          // 			lineStyle: {
          // 				// 系列级个性化折线样式
          // 				width: 0,
          // 				type: 'dotted',
          // 				color: '#D0D7FF', //折线的颜色
          // 			},
          // 		},
          // 	}, //线条样式
          // 	symbolSize: 0, //折线点的大小
          // 	areaStyle: { normal: {} },
          // 	data: prevPeriodData,
          // },
          {
            name: `本${this.periodName}`,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: 'solid',
                  color: '#82a9f8',
                },
              },
              emphasis: {
                color: '#82a9f8',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: 'solid',
                  color: '#82a9f8', //折线的颜色
                },
              },
            }, //线条样式
            symbolSize: 0, //折线点的大小
            data: seriesData,
          },
        ],
      }
      myChart.setOption(option, true)
    },
  },
}
</script>
<style lang='scss'>
#fireHazardChart {
  height: 240px;
}
</style>